<template>
  <div class="dashboard-container" v-loading="loading">
    <div style="padding-top:15px;padding-left:5px;padding-bottom:20px;">
      <label>请选择项目：</label>
      <el-select
        v-model="ProjectID"
        placeholder="请选择项目"
        filterable
        style="width: 550px;margin-right: 15px;"
        class="filter-item"
        @change="getList"
      >
        <el-option v-for="item in projectDatas" :key="item.ID" :label="item.Title" :value="item.ID"></el-option>
      </el-select>
      <!-- <autocompleteText /> -->
      <!-- <el-button
        style="width: 100px;"
        type="primary"
        @click="getList(1)"
        size="small"
        icon="el-icon-search"
      >查询</el-button>-->
    </div>

    <div class="box">
      <projectarea ref="projectareaRef" />
    </div>
    <div class="box">
      <projectprovince ref="projectprovinceRef" />
    </div>
    <div class="box">
      <projectdealer ref="projectdealerRef" />
    </div>
  </div>
</template>

<script>
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Wordcloud from "highcharts/modules/wordcloud";
import Highcharts3D from "highcharts/highcharts-3d";
import Highmaps from "highcharts/modules/map";
import $ from "jquery";
Wordcloud(Highcharts);
HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);

import { reqGetProjects } from "@/api/report/projectChart";

import projectdealer from "./components/projectdealer";
import projectprovince from "./components/projectprovince";
import projectarea from "./components/projectarea";
import autocompleteText from "./components/autocompleteText";

export default {
  name: "Dashboard",
  components: {
    projectdealer,
    projectprovince,
    projectarea,
    autocompleteText
  },
  data() {
    return {
      ProjectID: "",
      projectDatas: [],
      loading: true
    };
  },
  computed: {
    // 计算属性，只要相关联的值没有改变，直接返回，不再进行计算，与方法区别，缓存
  },
  created() {
    // 实例创建完成后执行的代码
    this.init();
  },
  methods: {
    // -----------------------------------------------初始化模块
    // list
    async init() {
      let res = await reqGetProjects();
      if (res.code === 200) {
        this.projectDatas = res.data;
        this.ProjectID = this.projectDatas[0].ID;
        this.getList();
      }
    },
    async getList() {
      this.loading = true;
      setTimeout(() => {
        this.$refs.projectareaRef.init(this.ProjectID);
        this.$refs.projectprovinceRef.init(this.ProjectID);
        this.$refs.projectdealerRef.init(this.ProjectID);
      });
      this.loading = false;
    }

    // -----------------------------------------------搜索模块

    // -----------------------------------------------业务操作模块
  }
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  .dateSearch {
    font-size: 24px;
    font-weight: 400;
  }
}
.boxheader {
  width: 96.4%;
  display: inline-block;
  border: 1px solid #ccc;
  overflow: hidden;
  position: relative;

  h3 {
    position: absolute;
    top: -10px;
    left: 10px;
    z-index: 1000;
  }
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.box {
  width: 100%;
  height: 500px;
  display: inline-block;
  border: 1px solid #ccc;
  overflow: hidden;
  position: relative;

  h3 {
    position: absolute;
    top: -10px;
    left: 10px;
    z-index: 1000;
  }
}
</style>
